<template>
	<view class="pages">
		<view class="content">
			
			<view class="top">
				<view class="top-icon">
					<text class="iconfont icon-xiaoxitongzhi"></text>
					<text class="iconfont icon-shezhi" @click="logout"></text>
				</view>
			</view>
			
			<view class="is_login" @click="isLogin" v-if="!login.user_token">
				<button type="default" size="mini">登录</button>
			</view>
			<view class="user" v-else>
				<view class="user-img">
					<image :src="login.headpic" mode=""></image>
				</view>
				
				<view class="user-info">
					<view class="user-name">{{login.name}}</view>
					<view class="state">
						<view class="guanzhu">关注</view>
						<view class="num">14</view>
						<view class="fensi">粉丝</view>
						<view class="num">16</view>
					</view>
				</view>
				<view class="to-user-info" @click="toProfileHome">个人主页<text class="iconfont icon-youbian"></text></view>
			</view>
			
			<view class="quick-nav">
				<view class="nav-item">
					<view class="iconfont icon-tongzhi"></view>
					<view>消息通知</view>
				</view>
				<view class="nav-item" @click="tuCollection('我的收藏')">
					<view class="iconfont icon-shoucang"></view>
					<view>我的收藏</view>
				</view>
				<view class="nav-item" @click="tuCollection('浏览历史')">
					<view class="iconfont icon-lishi"></view>
					<view>浏览历史</view>
				</view>
				<view class="nav-item">
					<view class="iconfont icon-xiazai"></view>
					<view>下载管理</view>
				</view>
			</view>
			
			<view class="release">
				<view class="title">再小的想法，都值得被记录</view>
				<view class="fabu" @click="fabu"><text class="iconfont icon-tianjia"></text>发布</view>
			</view>
			
			<!-- 轮播图广告 -->
			<view class="ad">
				<swiper 
					@change="changeCurret" 
					easing-function="easeOutCubic" 
					:indicator-dots="false" 
					:autoplay="true" 
					:interval="5000" 
					:duration="500"
				>
					<swiper-item>
						<view class="swiper-item">
							<image src="https://laijunlin.xyz/static/home/banner/ad1.jpg" mode="widthFix"></image>
							<view class="num">{{num}}</view>
							<view class="adimg">广告</view>
						</view>
					</swiper-item>
					<swiper-item>
						<view class="swiper-item">
							<image src="https://laijunlin.xyz/static/home/banner/ad2.jpg" mode="widthFix"></image>
							<view class="num">{{num}}</view>
							<view class="adimg">广告</view>
						</view>
					</swiper-item>
					<swiper-item>
						<view class="swiper-item">
							<image src="https://laijunlin.xyz/static/home/banner/ad3.jpg" mode="widthFix"></image>
							<view class="num">{{num}}</view>
							<view class="adimg">广告</view>
						</view>
					</swiper-item>
				</swiper>
			</view>
			
			<view class="my-waiter">
				<view class="title">我的服务</view>
				
				<!--  -->
				<view class="waiter">
					<view class="waiter-item">
						<view class="iconfont icon-kefu"></view>
						<view>我的客服</view>
					</view>
					<view class="waiter-item">
						<view class="iconfont icon-weixingongyihuodongshanghu"></view>
						<view>懂你公益</view>
					</view>
					<view class="waiter-item">
						<view class="iconfont icon-anquan"></view>
						<view>反诈卫士</view>
					</view>
					<view class="waiter-item">
						<view class="iconfont icon-gouwu"></view>
						<view>购物助手</view>
					</view>
					<view class="waiter-item">
						<view class="iconfont icon-qianbao"></view>
						<view>钱包</view>
					</view>
					<view class="waiter-item">
						<view class="iconfont icon-kabao"></view>
						<view>卡包</view>
					</view>
					<view class="waiter-item">
						<view class="iconfont icon-youxi"></view>
						<view>游戏中心</view>
					</view>
					<view class="waiter-item">
						<view class="iconfont icon-xiaoyouxi"></view>
						<view>小游戏</view>
					</view>
					<view class="waiter-item">
						<view class="iconfont icon-shezhi"></view>
						<view>设置</view>
					</view>
				</view>
			</view>
			
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				num: 1,
				login: [],
				userInfo: [],
				fabuType: ['发布文章', '发布视频']
			}
		},
		mounted() {
			uni.getStorage({
				key: 'userSession',
				success: res => {
					// console.log(res.data);
					this.login = res.data
				}
			});
		},
		onPullDownRefresh() {
				console.log('refresh');
				setTimeout(function () {
					uni.stopPullDownRefresh();
				}, 1000);
			},
		methods: {
			logout() {
				uni.showActionSheet({
					itemList: ['退出登录'],
					success: res => {
						// console.log(res);
						if(res.tapIndex == 0) {
							uni.request({
								url: 'https://laijunlin.xyz/index/user/logout',
								method: 'POST',
								header: {
									'Content-Type': 'application/x-www-form-urlencoded'
								},
								success: (res) => {
									// console.log(res.data.msg);
									uni.showToast({
										title: res.data.msg,
										icon: 'success'
									});
									
									setTimeout(() => {
										uni.reLaunch({
											url: '/pages/profile/profile'
										});
										// getApp().globalData.userSession = [];
										
										uni.removeStorage({
											key: 'userSession',
											success: res => {
												// console.log(res);
											}
										});
										
										this.login = [];
									}, 1500)
								}
							});
						}
					},
					fail: res => {
						console.log(res);
					},
				});
			},
			toProfileHome() {
				uni.navigateTo({
					url: "/pages/profile-home/profile-home"
				})
			},
			changeCurret(e) {
				this.num = e.detail.current + 1;
			},
			tuCollection(name) {
				uni.navigateTo({
					url: "../collection/collection?name=" + name
				})
			},
			isLogin() {

				uni.navigateTo({
					url: '/pages/login/login'
				})
				
			},
			fabu() {
				let _this = this;
				if(this.login.user_token) {
					uni.showActionSheet({
						itemList: this.fabuType,
						success: res => {
							if(this.fabuType[res.tapIndex] == '发布文章') {
								uni.navigateTo({
									url: '/pages/add-article/add-article'
								})
							} else {
								uni.navigateTo({
									url: '/pages/add-video/add-video'
								})
							}
						},
						fail: res => {
							console.log(res);
						},
					});
				} else {
					uni.showModal({
						title: '检测到您还为登录',
						content: '跳转到登录页面？',
						success: function (res) {
							if (res.confirm) {
								uni.navigateTo({
									url:'/pages/login/login'
								})
							} else if (res.cancel) {
								uni.showToast({
									title: '已取消',
									icon: 'error'
								})
							}
						}
					});
				}
			}
		}		
	}
</script>

<style lang="scss" scoped>
	
	.content {
		padding: 0 40rpx 60rpx;
		box-sizing: border-box;
		background-color: #edebee;
		height: 100%;
		
	}
	
	// .pages {
	// 	height: 100vh;
	// 	background-color: #edebee;
	// }
	
	.top {
		width: 100%;
		height: 100rpx;
		.top-icon {
			float: right;
			.iconfont {
				font-size: 40rpx;
				line-height: 100rpx;
				margin-left: 40rpx;
			}
			.icon-shezhi {
				font-size: 44rpx;
			}
		}
	}
	
	.is_login {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100rpx;
		button {
			font-size: 36rpx;
			background-color: #ff84a4;
			color: #fff;
		}
	}
	
	.user {
		display: flex;
		width: 100%;
		height: 100rpx;
		
		.user-img {
			image {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				vertical-align: middle;
			}
		}
		
		.user-info {
			margin-left: 20rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			.user-name {
				font-size: 32rpx;
				font-weight: 800;
			}
			.state {
				display: flex;
				.guanzhu, .fensi {
					color: #999;
					font-size: 24rpx;
				}
				.num {
					color: #333;
					font-weight: 800;
					margin-left: 3px;
					margin-right: 16rpx;
					font-size: 24rpx;
				}
			}
		}
		
		.to-user-info {
			margin-left: auto;
			line-height: 100rpx;
			font-size: 26rpx;
			color: #666;
			.iconfont {
				margin-left: 5px;
				font-size: 26rpx;
			}
		}
	}
	
	.quick-nav {
		display: flex;
		justify-content: space-around;
		align-items: center;
		width: 100%;
		height: 160rpx;
		background-color: #ffffff;
		border-radius: 8px;
		margin-top: 50rpx;
		.nav-item {
			text-align: center;
			font-size: 24rpx;
			color: #666;
			.iconfont {
				font-size: 50rpx;
				margin-bottom: 16rpx;
				color: #ff6d9f;
			}
		}
	}
	
	.release {
		padding: 0 30rpx;
		box-sizing: border-box;
		width: 100%;
		height: 120rpx;
		border-radius: 8px;
		display: flex;
		background-color: #fff;
		margin-top: 30rpx;
		align-items: center;
		justify-content: space-between;
		.title {
			font-size: 28rpx;
			color: #333;
		}
		.fabu {
			border: 2px solid #ff6d9f;
			color: #ff6d9f;
			font-size: 26rpx;
			border-radius: 20rpx;
			padding: 8rpx 16rpx;
			box-sizing: border-box;
			text-align: center;
			.iconfont {
				margin-right: 3px;
				vertical-align: bottom;
			}
		}
	}
	
	.my-waiter {
		background-color: #fff;
		margin-top: 30rpx;
		padding: 30rpx 20rpx 0;
		border-radius: 8px;
		.title {
			font-weight: 800;
			font-size: 32rpx;
		}
		.waiter {
			display: flex;
			flex-wrap: wrap;
			.waiter-item {
				width: 33.33%;
				text-align: center;
				padding: 30rpx 0;
				font-size: 26rpx;
				.iconfont {
					font-size: 60rpx;
					margin-bottom: 5px;
				}
			}
		}
	}
	
	.ad {
		width: 100%;
		height: 200rpx;
		margin-top: 30rpx;
		border-radius: 8px;
		overflow: hidden;
		background-color: #fff;
		swiper {
			width: 100%;
			height: 200rpx;
			swiper-item {
				width: 100%;
				height: 200rpx;
				.swiper-item {
					position: relative;
					width: 100%;
					height: 200rpx;
					image {
						width: 100%;
					}
					.num {
						position: absolute;
						right: 20rpx;
						bottom: 10rpx;
						color: #666;
						font-size: 12px;
					}
					.adimg {
						position: absolute;
						right: 20rpx;
						top: 10rpx;
						color: #666;
						font-size: 8px;
					}
				}
			}
		}
		
	}
	
</style>
